import React, { Component } from "react";
import { connect } from 'dva';
import { Input, Select, Button, Form, Row, Col, Table, Popconfirm } from "antd";
import "./style.less";
import ResizTable from "./../../../components/Table/table";
//跳转页面所需的依赖
import { routerRedux } from 'dva/router';
import { RowRatio, ColRatio, formItemLayout } from "./../../../utils/RowUtil";
import PageTitle from "./../../../components/PageTitle/pageTitle";
const FormItem = Form.Item;


  // 配置数据源
  const data = [];

@Form.create()
@connect(({ list }) => ({
    list
  }))
class SkuManagement extends Component {

    constructor(props) {
        super(props);
        // 列名 
        this.columns = [{
            title: '编号',
            dataIndex: 'id',
            width: 120,
        }, {
            title: '商品图片',
            dataIndex: 'image',
            width: 120,
        }, {
            title: '商品名称',
            dataIndex: 'name',
            width: 140,
        }, {
            title: '商品分类',
            dataIndex: 'type',
            width: 140,
        }, {
            title: 'sku',
            dataIndex: 'sku',
            width: 140
        }, {
            title: '供应商名称',
            dataIndex: 'gongying',
            width: 150,
        }, {
            title: '店铺分类',
            dataIndex: 'shoptType',
            width: 100,
        },{
            title: '规格',
            dataIndex: 'guige',
            width: 100,
        }, {
            title: '市场价',
            dataIndex: 'price',
            width: 100,
        },{
            title: '尾货价',
            dataIndex: 'weiprice',
            width: 100,
        }, {
            title: '专属价',
            dataIndex: 'zhuanprice',
            width: 100,
        },{
            title: '上架/下架',
            dataIndex: 'shangjia',
            width: 100,
        }, {
            title: '销量',
            dataIndex: 'xiaoliang',
            width: 100,
        },{
            title: '操作',
            dataIndex: 'operat',
            render: (text, record, index) => {
                return (
                    <div>
                        <Button type="primary" onClick={() => this.toDetail(record, index)}>查看详情</Button>
                        <Button type="danger" onClick={() => this.deleteData(record, index)}>删除</Button>
                    </div>
                );
            }
        }];
    }
    //点击查看详情的时候触发
    toDetail(text, index) {
        console.log(this.props);
        const { dispatch } = this.props;
        dispatch(routerRedux.push({ 
            pathname: '/shopping/skuMan/detail',
            params: text.key
        }));
    }

    //删除数据
    deleteData(text, index) {
        const { dispatch } = this.props;
        dispatch({
            type: 'list/delete',
            payload: {
             id: text.key
            },
            url: '/delete'
        });
    }

    componentWillMount() {
        for(let count = 0; count < 100; count ++) {
            data.push({
                key: `${ count + 1 }`,
                id: `${count + 100000000}`,
                image: "暂无图片",
                name: `货品${ count + 1 }`,
                type: `分类${ count + 1 }`,
                sku: `${count + 20180824}`,
                gongying: `供应商${count + 1}`,
                shoptType: `${count + 1}`,
                guige: `${count + 1}`,
                price: `${count + 1}`,
                weiprice: `${count + 1}`,
                zhuanprice: `${count + 1}`,
                shangjia: `${count + 1}`,
                xiaoliang: `${count + 1}`
            });
        }   
    }

    handleSearch = (e) => {
        e.preventDefault();
        const { form, dispatch } = this.props;
        form.validateFields((err, values) => {
            dispatch({
                type: 'list/fetch',
                payload: {
                  ...values
                },
                url: '/list'
            });
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="jxf_container">
               <PageTitle title="SKU管理"/>
               <div>
                    <Button>全部商品</Button>
                    <Button>已上架</Button>
                    <Button>未上架</Button>
               </div>
               {/* // form表单区域 */}
               <div className="formArea">
                    <div className="formTitle">筛选条件</div>
                    <Form
                        className="ant-advanced-search-form"
                        onSubmit={this.handleSearch}
                        style={{ padding: 20 }}
                    >
                        <Row { ...RowRatio }>
                            <Col {...ColRatio}>
                                <FormItem label="商品名称" {...formItemLayout}>
                                    {getFieldDecorator("productName", {
                                    rules: [{
                                        required: false,
                                        message: '请输入商品名称',
                                    }],
                                    })(
                                    <Input size="large" placeholder="请输入商品名称" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col {...ColRatio}>
                                <FormItem label="SKU" {...formItemLayout}>
                                    {getFieldDecorator("SKU", {
                                    rules: [{
                                        required: false,
                                        message: '请输入SKU',
                                    }],
                                    })(
                                    <Input size="large" placeholder="请输入SKU" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col {...ColRatio}>
                                <FormItem label="供应商名称" {...formItemLayout}>
                                    {getFieldDecorator("enterprieName", {
                                    rules: [{
                                        required: false,
                                        message: '请输入供应商名称',
                                    }],
                                    })(
                                    <Input size="large" placeholder="请输入供应商名称" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col {...ColRatio}>
                                <Button type="primary" style={{ marginLeft: 20 }} htmlType="submit" size="large">搜索</Button>
                                <Button type="primary" style={{ marginLeft: 20 }} onClick={() => this.props.form.resetFields()} size="large">重置</Button>
                            </Col>
                        </Row>
                    </Form>
               </div>
               <div>
                 <div className="formTitle">数据列表</div>
                 <ResizTable dataSource={data} columns={this.columns}/>
               </div>
              
            </div>
        );
    }
}

export default SkuManagement;